<template>
	<view class="mt-25 comment">
		<view v-for="item in commentList" :key="item.id" class="flex mb-12">
			<u-avatar :src="$ossUrl+item.profile.avatar"></u-avatar>
			<view class="pl-8  flex-1">
				<text class="font-size-14 font-color-dark">{{item.profile.nickname}}</text>
				<view class="mt-4 font-size-12">
					{{item.content&&handleLang(item.content)}}
				</view>
				<view class="font-size-10 font-color-minor flex">
					<text class="mr-8">{{item.create_time}}</text>
					<view @click="reply(item)">{{handleLang('回复')}}</view>
				</view>
				<view class="mtb-8 flex" v-for="replyItem in item.reply" :key="reply.id">
					<u-avatar size='24' :src="$ossUrl+replyItem.profile.avatar"></u-avatar>
					<view class="pl-4">
						<view class="nickname font-size-12 flex flex-ai-center font-color-black">
							<text>{{replyItem.profile.nickname}}</text>
							<view class="font-size-10 mlr-4 arrow" v-if="replyItem.reply_id!=item.id">
								<w-icon size="10" name="arrow-right" color="#000"></w-icon>
							</view>
							<text v-if="replyItem.reply_id!=item.id">{{replyItem.reply_profile.nickname}}</text>
						</view>
						<view class="font-color-black font-size-12 ptb-4">
							{{replyItem.content&&handleLang(replyItem.content)}}
						</view>
						<view class="font-size-10 font-color-minor flex">
							<text class="mr-8">{{replyItem.create_time}}</text>
							<view @click="reply(replyItem,item)">{{handleLang('回复')}}</view>
						</view>
					</view>
				</view>
				<view class="font-size-10 font-color-convention text-center" v-if="item.hasMore"
					@click="getReply(item)">
					{{handleLang('加载更多')}}
				</view>
			</view>
		</view>

		<w-loading :type="loading"></w-loading>


		<view class="action plr-16 flex flex-ai-center">
			<u--input :focus="focus" @blur="blur" ref="inp" border="none" v-model="form.content" @confirm='sendComment'
				:placeholder="handleLang(inpPlaceholder)" :customStyle="inpStyle" fontSize="28rpx" height="40"></u--input>
		</view>
	</view>
</template>


<script>
	import {
		getRumorReply,
		getRumorComment,
		sendComment
	} from '@/api/notice'
	export default {
		props: {
			rumorId: {
				type: [String, Number],
				default: ''
			}
		},
		watch: {
			rumorId: {
				handler(v) {
					this.search = {
						rumor_id: v,
						page: 1
					}
					this.getCommentList(this.search);
				},
				immediate: true
			}
		},
		data() {
			return {
				inpStyle: {
					backgroundColor: '#F5F5F5',
					height: '80rpx',
					padding: '0 24rpx',
					borderRadius: '40rpx',
				},
				search: {
					rumor_id: '',
					page: 1,
				},
				loading: 'none',
				inpPlaceholder: "请输入评论内容 ",
				commentList: [],
				focus: false,
				form: {
					rumor_id: '',
					content: '',
					reply_comment_id: '',
				},
				replyMap: {

				},
			}
		},
		methods: {
			//获取回复
			async getReply({
				id
			}) {

				if (this.replyMap[id]) {
					if (this.replyMap[id].loading) return;
				} else {
					this.replyMap[id] = {
						rumor_id: this.rumorId,
						comment_id: id,
						page: 1,
						list_rows: 5
					}
				}
				this.replyMap[id].loading = true;
				let search = search = this.$tools.copyObj(this.replyMap[id])
				search.page++
				delete search.loading;
				getRumorReply(search).then(res => {
					this.insertReply(res.data.data, id)
				})

			},
			//插入回复
			insertReply(list, replyId) {
				let index = this.commentList.findIndex(v => v.id == replyId);
				this.replyMap[replyId].loading = false;
				if (list.length < 5) {
					this.commentList[index].hasMore = false
				}
				list.map(v => {
					this.$set(this.commentList[index].reply, this.commentList[index].reply.length, v)
				})
			},
			//加载更多一级评论
			loadMore() {
				let search = this.$tools.copyObj(this.search);
				search.page++
				this.getCommentList(search)
			},
			//获取评论列表
			async getCommentList(search) {
				if (this.loading == 'loading') return;
				this.loading = 'loading';
				try {
					let res = await getRumorComment(search)
					if (search.page == 1) {
						this.commentList = []
					}
					if (res.data.data.length) {
						this.search = search;
					}
					res.data.data = res.data.data.map(v => {
						v.hasMore = v.reply.length >= 5
						return v
					})
					this.commentList = this.commentList.concat(res.data.data);
				} finally {
					this.loading = 'none'
				}
			},
			//刷新
			refresh() {
				this.commentList = []
				this.search.page = 1
				this.getCommentList(this.search);
			},
			//发送评论、回复
			sendComment() {
				this.form.rumor_id = this.search.rumor_id;
				sendComment(this.$tools.copyObj(this.form)).then(res => {
					uni.showToast({
						title: '评论成功',
						icon: 'success',
						duration: 2000
					});
					this.refresh();
				})
			},
			//回复
			reply({
				profile,
				id
			}, item) {
				this.$nextTick(() => {
					this.focus = true;
				})
				this.inpPlaceholder = `回复${profile.nickname}`;
				if (item) {
					this.form.reply_comment_id = item.id;
				} else {
					this.form.reply_comment_id = id
				}
				this.form.reply_id = id;
			},
			//失去焦点
			blur() {
				this.focus = false;
				this.inpPlaceholder = "请输入评论内容 ";
				this.form.reply_comment_id = '';
				this.form.content = '';
			}
		},
	}
</script>

<style lang="scss">
	.comment {
		.action {
			height: 128rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #191828;
			left: 0;
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
</style>